<template>
  <div class="activeVehicle">
    <div id="activeVehicle"  style="width: 100%;background-color:white"></div>
  </div>
</template>

<script>
  export default {
    props: ["perHourData", "perHour"],
    data(){
      return {
        seriesDispose: [],
        colors:[],
        xAxisList:["完成率","及时率"],
      }
    },
    mounted(){
      document.querySelector(".activeVehicle").style.height=document.querySelector(".reportManageWrap").clientHeight-270+"px"
      this.initData()
      //自适应
      /* window.addEventListener("resize", () => {
       this.myChart.resize();
       });*/
    },
    methods: {
      disposeData(){
        this.seriesDispose =[]
        this.xAxisList.forEach((item, key) => {
          this.seriesDispose.push({
            name: item,
            type: 'bar',
            barMaxWidth: '50px',
            data: this.perHourData[key],
          },)
        })
      },
      initData(){
        this.disposeData()
        if (this.myChart != null && this.myChart != "" && this.myChart != undefined) {
          this.myChart.dispose();
        }
        this.myChart = this.echarts.init(document.getElementById('activeVehicle'))
        const colors = ["#3975FE","#32B9FF","#66B5F1","#1CB7A9"]
        const option = {
          color: colors,
          title: {
            show: true,
            text: "企业处置情况",
            subtext: '',
            x: 'center',
            textStyle: {
              fontSize: 18,
              fontWeight: 'bolder',
              color: '#757575'          // 主标题文字颜色
            },
          },
          toolbox: {
            show: false,
            x: 'right',                // 水平安放位置，默认为全图右对齐，可选为：
            // 'center' ¦ 'left' ¦ 'right'
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              dataView: {readOnly: false},
              magicType: {type: [ 'bar','line']},
              restore: {},
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          legend: {
//            orient : 'vertical',
//            itemGap:40, //间距
            x: 'right',
//            y:'bottom',
            data: this.xAxisList,
            textStyle: {
              fontSize: 12,
              color: '#757575'          // 主标题文字颜色
            },
          },
          grid: {
            top: '16%',
            left: '0%',
            right: '0%',
            bottom: '0%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: this.perHour,
              axisTick: {
                alignWithLabel: true
              },
              textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                color: '#757575'
              },
              axisLine: {
                lineStyle: {
                  color: '#757575',
                }
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name:  "",
              min: 0,
              textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                color: '#757575'
              },
              axisLine: {
                lineStyle: {
                  color: '#757575'
                }
              },
              splitLine: {
                show: true,
                lineStyle:{
                  type:'dashed'
                }
              }
            }
          ],
          series: this.seriesDispose
        };
        this.myChart.setOption(option);
      }
    },
    watch: {
      perHourData(){
        this.initData()
      },
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/mixin.styl"
  .activeVehicle
    width: 100%
    margin 0 auto
    border-radius 15px
    display: flex
    justify-content: center
    color #757575 !important
</style>
